<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>文章列表</title>

    <link rel="stylesheet" href="../app/css/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="../app/css/libs/katex/0.6.0/katex.min.css">
    <link rel="stylesheet" href="../app/css/libs/videojs/5.11.7/video-js.min.css">
    <link rel="stylesheet" href="../app/css/dest/styles.css?=2016121272249">
    <link href="../css/materialdesignicons.min.css" rel="stylesheet">
    <link href="../css/style.min.css" rel="stylesheet">



    <style>
        @font-face {
            font-family: "lantingxihei";
            src: url("../fonts/FZLTCXHJW.TTF");
        }

        /* modal 模态框*/
        #invite-user .modal-body {
            overflow: hidden;
        }

        #invite-user .modal-body .form-label {
            margin-bottom: 16px;
            font-size: 14px;
        }

        #invite-user .modal-body .form-invite {
            width: 80%;
            padding: 6px 12px;
            background-color: #eeeeee;
            border: 1px solid #cccccc;
            border-radius: 5px;
            float: left;
            margin-right: 10px;
        }

        #invite-user .modal-body .msg-modal-style {
            background-color: #7dd383;
            margin-top: 10px;
            padding: 6px 0;
            text-align: center;
            width: 100%;
        }

        #invite-user .modal-body .modal-flash {
            position: absolute;
            top: 53px;
            right: 74px;
            z-index: 999;
        }

        /* end modal */

        .en-footer {
            padding: 30px;
            text-align: center;
            font-size: 14px;
        }

        .el-row {
            margin-bottom: 20px;
        }

        .el-col {
            border-radius: 4px;
        }
    </style>

    <style>
        a:hover,
        a:focus {
            text-decoration: none;
        }

        span.label {
            display: inline-block;
            margin: 10px 3px 16px 3px;
            padding: 6px 16px;
            border: none;
            font-size: 14px;
            font-weight: 100;
        }

        span.label-default {
            color: #999;
            background: none;
        }

        span.label-success {
            color: #0c9;
            background: #E7F8F2;
        }

        .userinfo-banner [data-toggle="tooltip"] {
            display: inline-block;
            border-bottom: dashed 1px #999;;
            color: #999 !important;
        }

        .certificate-item {
            padding-top: 10px;
        }

        .certificate-item a {
            color: #444;
        }
        .actives{
            background-color: #00c4ff;
        }
    </style>
    <script src="../js/jquery-3.5.0.js"></script>
    <script src="../js/http.js"></script>
    <!--    <script src="../js/vue.min.js"></script>-->
    <script src="../js/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../js/element-ui-index.css">
    <!-- 引入组件库 -->
    <script src="../js/elemnet-ui-index.js"></script>

    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/perfect-scrollbar.min.js"></script>
    <script type="text/javascript" src="../js/main.min.js"></script>
    <script src="../js/loginAndregister.js"></script>
</head>
<body >
<!--header-->
<nav class="navbar navbar-default navbar-fixed-top header">
    <script src="../js/header.js"></script>
</nav>

<!--mid-->
<div class="container" style="padding-top: 80px;" >
    <!--左侧-->
    <div class="col-xs-9">
        <div class="container-fluid">
            <div class="card" style="height: 38px">
                <div style="padding-left: 20px;padding-top: 8px" >
                    <a href="#" onclick="showall()">全部</a>
                    <a href="#"><input type="button"  style="width: 50px;float: right" value="搜索" onclick="toSearch()" ></a>
                    <input type="text"  style="width: 200px;float: right" id="searchBox">
                </div>
            </div>
        </div>


        <!--文章-->
        <div class="container-fluid" id="vue">
            <a href="#">
            <div class="card"   v-for="articles in ArticleList">
                <div class="card-header" onclick="articleJump(this)">
                    <h3>{{articles.title}}</h3>
                    <p style="display: none" id="articleId">{{articles.id}}</p>
                </div>
                <div class="card-body">{{articles.articleDescribe}}</div>
                <div class="card-footer">

                    <ul class="list-inline">
                        <li>作者:{{articles.username}}</li>
                        <li>发布：{{articles.createTime}}</li>
                        <li>浏览：{{articles.browseAmount}}</li>
                        <li>收藏：{{articles.collectionNumber}}</li>
                        <li>{{articles.articleTypeId}}</li>
                    </ul>
                </div>
            </div>
            </a>
        </div>


        <div class="container-fluid">
        <nav aria-label="Page navigation" >
            <ul class="pagination pagination-lg " id="page"  >
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
        </div>
    </div>
    <!--右侧-->
    <div class="col-xs-3 position-fixed col-xs-offset-7" id="sum">
        <div class="row">
            <div class="container-fluid">
                <a class="btn btn-info btn-w-md" style="width: 320px" onclick="onSkip()"><span class="mdi mdi-brush"></span>发布文章</a>
            </div>
            <div class="card" style="margin-top: 20px" >
                <div class="card-body" style="height: 90px">

                    <div class="col-xs-4">{{Article.users}}</div>
                    <div class="col-xs-4">{{Article.articles}}</div>
                    <div class="col-xs-4">{{Article.comments}}</div>


                    <div class="col-xs-4">用户</div>
                    <div class="col-xs-4">文章</div>
                    <div class="col-xs-4">回复</div>

                </div>
            </div>
            <div class="card" >
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>文章分类</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="type in ArticleType "  onclick="typeJump(this)">
                        <td style="display: none" id="typeId">{{type.id}}</td>
                        <td>{{type.name}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>


<script type="application/javascript">
        // 分页页面渲染
        var vm = new Vue({
            el: '#vue',
            data: {
                ArticleList: []
            },
            methods:{
                showArticle :function () {
                    //获取本地缓存中page的值
                    let pageNumber = localStorage.getItem("page");
                    if (pageNumber==null){
                        pageNumber=1;
                    }
                    //获取本地缓存中typeId的值
                    let typeIdVal = localStorage.getItem("typeId");
                    //获取本地缓存中keyWord的值
                    let keyWordVal = localStorage.getItem("keyWord");
                    //
                    //定义参数
                    let thisObj = this;
                    let params={
                        page:pageNumber,
                        articleTypeId:typeIdVal,
                        articleDescribe:keyWordVal
                    };
                    //请求地址
                    let url = "/education_api/article/info";
                    httpGetWithParams(url,params, function (resp) {
                        console.log(resp);
                        thisObj.ArticleList = resp;
                    });
                }
            },
            mounted: function () {
                this.showArticle();


            }

        });

        // //获取路径参数
        // $.getUrlParam = function (name) {
        //     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        //     var r = window.location.search.substr(1).match(reg);
        //     if (r != null) return unescape(r[2]); return null;
        // };
        //
        // var pageNumber = $.getUrlParam("page");
        // if (pageNumber==null){
        //     pageNumber=1;
        // }



    var vm = new Vue({
        el: '#sum',
        data: {
            Article: [],
            ArticleType:[]
        },
        methods: {
            /**
             *    用户和文章回复统计
             */
            getSumForArticles: function () {
                //定义参数
                let thisObj = this;
                //请求地址
                let url = "/education_api/article/sum";
                httpGet(url, function (resp) {
                    console.log("----------sum----------");
                    console.log(resp);
                    thisObj.Article = resp;
                });

            },
            ArticleClassify:function () {
                //定义参数
                let thisObj=this;
                //定义请求地址
                let url="/education_api/article-type/type";
                httpGet(url,function (resp) {
                    console.log("---------ArticleType--------")
                    console.log(resp);
                    thisObj.ArticleType=resp;
                })
            },



        },
        mounted:function () {
            this.getSumForArticles();
            this.ArticleClassify();
        }

    });

    function articleJump(obj) {
        let articleId = $(obj).children("#articleId").html();
        console.log(articleId);
        location.href="../article/detail.html?"+"id="+articleId

    }

    window.onload = function(){
        var obj_lis = document.getElementById("page").getElementsByTagName("a");
        for(i=0;i<obj_lis.length;i++){
            obj_lis[i].onclick = function(){
              let pageVal=this.innerHTML;
              localStorage.setItem("page",pageVal);
                location.reload();

                        // let params={page:pageVal};
                        // //请求地址
                        // let url = "/education_api/article/info";
                        // httpGetWithParams(url,params, function (resp) {
                        //
                        //
                        //     console.log("li点击事件");
                        //     console.log(resp);
                        //     result=resp;
                        //
                        //
                        // });

                    };


            }

    };
    // 分类
    function typeJump(obj){
        let typeId = $(obj).children("#typeId").html();
        console.log(typeId);
        localStorage.setItem("typeId",typeId);
        localStorage.removeItem("page");
        localStorage.removeItem("keyWord");
        location.reload();
    }
    //全部
    function showall() {
        localStorage.removeItem("typeId");
        localStorage.removeItem("page");
        localStorage.removeItem("keyWord");
        location.reload();

    }
    //搜索
    function toSearch(){
        let searchBoxVal = $("#searchBox").val();
        console.log(searchBoxVal);
        localStorage.setItem("keyWord",searchBoxVal);
        location.reload();
    }

     function onSkip(){
        location.href = "../editor/editormd.html";
     }





</script>
</body>
</html>